<template>
	<view class="pg">
		<!-- type：1(正常商品)，0(秒杀商品),3(拼团商品),4(到店自取) -->
		<view class="order" v-for="(item, index) in value" :key="index" @tap="todetail(item.id,index)">
			<view class="order_top">
				<view class="order_top_l">
					<view class="item group" v-if="type == 3">拼团</view>
					<view class="item integral" v-else-if="type == 2">积分</view>
					<view v-else>
						<view class="item skill" v-if="item.seckill == 2">秒杀</view>
					</view>
					<view class="item tostore" v-else-if="type == 4">到店自取</view>
					<view class="ordernum">订单编号：{{item.order_no}}</view>
				</view>
				<view class="" v-if="type == 3">
					<view v-if="item.state == 1" class="orderstate">待付款</view>
					<view v-if="item.state == 2" class="orderstate">待成团</view>
					<view class="" v-if="item.invite == 1">
						<view v-if="item.state == 3" class="orderstate">待发货</view>
						<view v-if="item.state == 4" class="orderstate">待收货</view>
					</view>
					<view class="" v-else-if="item.invite == 2">
						<view v-if="item.state == 3 || item.state == 4" class="orderstate">待自提</view>
					</view>
					<view v-if="item.state == 5" class="orderstate">已完成</view>
					<view v-if="item.state == 6" class="orderstate">拼团失败</view>
					<view v-if="item.state == 7" class="orderstate">已退款</view>
				</view>
				<view v-else>
					<view v-if="item.state == 1" class="orderstate">待付款</view>
					<view class="" v-if="item.invite == 1">
						<view v-if="item.state == 2" class="orderstate">待发货</view>
						<view v-if="item.state == 3" class="orderstate">待收货</view>
					</view>
					<view class="" v-else-if="item.invite == 2">
						<view v-if="item.state == 2 || item.state == 3" class="orderstate">待自提</view>
					</view>
					<view v-if="item.state == 4" class="orderstate">已完成</view>
					<view v-if="item.state == 5" class="orderstate">已退款</view>
				</view>
			</view>
			<view class="orderinfolist">
				<view class="orderinfo" v-for="(it,index) in item.goods" :key="index">
					<image :src="it.img" mode="widthFix"></image>
					<view class="orderinfo_l">
						<view class="orderinfo_info">
							<view class="title overhiddenTwo">{{it.name}}</view>
							<view class="standard">{{it.specs}}</view>
						</view>
						<view class="orderinfo_r">
							<view class="price">
								￥<text>{{it.price}}</text>
							</view>
							<view class="num">x{{it.num}}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 付款信息 -->
			<view class="paymessage" v-if="type != 2">
				实付：<text class="qian">￥</text><text>{{item.pay_price }}</text>
				<text class="postage" v-if="item.postage">(运费:￥{{item.postage}})</text><text class="postage"
					v-else>(免运费)</text>
			</view>
			<view class="paymessage" v-else>
				兑换积分：<text>1200</text>/积分(含运费：免运费)
			</view>

			<view class="orderbtn" v-if="type != 2 && item.state == 1">
				<view class="orderbtn_i orderbtn_left" @tap.stop="cancelOrder(item.id,index)">
					取消订单
				</view>
				<view class="orderbtn_i orderbtn_left" style="background-color: #FF2842;color: white;"
					@tap.stop="todpay(item.id)">
					找人代付
				</view>
				<view class="orderbtn_i orderbtn_right" @tap.stop="topay(item.id)">
					立即支付
				</view>
			</view>

			<view class="orderbtn" v-if="type == 3 && item.state == 4 ">
				<view class="orderbtn_i orderbtn_right" @tap.stop="confirmReceipt(item,index)">
					确认收货
				</view>
			</view>
			<view class="orderbtn" v-else-if="(type == 0 || type == 1) && item.state == 3 ">
				<view class="orderbtn_i orderbtn_right" @tap.stop="confirmReceipt(item,index)">
					确认收货
				</view>
			</view>
		</view>
		<sc-no v-if="!value.length" :noStatus="true" @navtive="navtive" :url="scNoPic" nofont="暂无订单" :width="width"
			:noBtn="noBtn"></sc-no>
		<view class="">
			<uni-popup ref="popup" background-color="#fff">
				<view class="" style="padding: 0 30rpx;">
					<view class="" style="background-color: white;border-radius: 16rpx;height: 338rpx;padding: 30rpx;">
						<view class="" style="position: relative;">
							<view class="" style="text-align: center;font-size: 28rpx;">
								找人代付
							</view>
							<image src="/static/image/login/close.png" @click="closePop"
								style="width: 16rpx;height: 16rpx;position: absolute;right: 10rpx;top: 10rpx;" mode="">
							</image>
						</view>
						<view class="" style="margin-top: 22rpx;font-size: 24rpx;">
							代付链接：
						</view>
						<view class="" style="margin-top: 30rpx;">
							<view class="" style="display: flex;align-items: center;justify-content: space-between;">
								<view class=""
									style="width: 480rpx;height: 68rpx;display: flex;align-items: center;padding: 18rpx 24rpx;background-color: #EDEDED;border-radius: 10rpx;font-size: 24rpx;overflow: hidden;white-space: nowrap;">
									 {{url}}
								</view>
								<view class="" @click="copy"
									style="width: 140rpx;height: 68rpx;border-radius: 10rpx;background-color: #FF4D62;color: white;font-size: 24rpx;display: flex;justify-content: center;align-items: center;margin-left: 20rpx;">
									复制
								</view>
							</view>
						</view>
						<view class="" style="margin-top: 40rpx;font-size: 24rpx;">
							请复制代付链接发送给好友~
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue';
	import scNo from '@/components/sc-no/sc-no.vue';
	import url_config from '@/common/config.js';
	import {
		cancel,
		assemblecancel,
		receivingGoods
	} from '@/common/order.js';
	export default {
		components: {
			uniLoadMore,
			scNo
		},
		props: ['value', 'type', 'scNoPic', 'width', 'index'],
		data() {
			return {
				Url: this.Imgurl,
				noBtn: '去逛逛',
				state:1,//1是支付 2是代付
				url:'',//代付链接
			}
		},
		created() {
			// this.getCartList()
			if (!uni.getStorageSync('token') && uni.getSystemInfoSync().version) {
				this.noBtn = '去登录'
			}
		},
		methods: {
			navtive() {
				if (!uni.getStorageSync('token') && uni.getSystemInfoSync().version) {
					this.$emit('login')
				} else {
					// console.log('55')
					uni.reLaunch({
						url: '/pages/index/index'
					})
				}
			},
			todetail(id, index) {
				console.log("获取的订单id为", id)
				console.log("获取的订单index为", index)
				id = this.value[index].id
				let skill = ''
				if (this.type == 0 || this.type == 1) {
					skill = this.value[index].seckill
					if (skill == 2) {
						skill = 0
					}
				}
				this.$emit('todetail', id, skill)
			},
			tologistics(key) {
				this.$emit('tologistics', key)
			},
			cancelOrder(id, key) {
				console.log("key", key)
				uni.showModal({
					title: '提示',
					content: '您确定要取消该订单吗？',
					showCancel: true,
					success: res => {
						if (res.confirm) {
							this.$emit('cancelOrder', {
								id: id,
								key: key
							})
						}
					}
				});
			},
			topay(id) {
				console.log(this.type)
				let data = {
					order_id: id,
					type: this.type,
					state:this.state
				}
				
				uni.navigateTo({
					url: '/pageB/cashierDesk/cashierDesk?data=' + JSON.stringify(data)
				})
			},
			//代付
			todpay(id) {
				console.log(id);
				this.$refs.popup.open()
 
				let data = {
					order_id: id,
					type: this.type
				} 
				this.url = url_config + 'h5/pageB/cashierDesk/cashierDesk2?order_id=' + id + '&type=' + this.type 
			 
				// uni.navigateTo({
				// 	url: '/pageB/cashierDesk/cashierDesk?data=' + JSON.stringify(data)
				// })
			
			},
			//关闭弹窗
			closePop(){
				this.$refs.popup.close()
			},
			//复制
			copy(){
				uni.setClipboardData({
					data:this.url,
					
				})
			},
			confirmReceipt(it, key) {
				uni.showModal({
					title: '提示',
					content: '确定要确认收货吗？',
					showCancel: true,
					success: res => {
						if (res.confirm) {
							this.$emit("confirmReceipt", {
								id: it.id,
								type: this.type,
								key: key
							})
						}
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.pg {
		padding-bottom: 30upx;
		box-sizing: border-box;
	}

	.order {
		width: calc(100% - 30upx);
		margin: auto;
		margin-top: 20upx;
		padding: 25upx 15upx;
		border-radius: 10upx;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.order_top {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.order_top_l {
			display: flex;
			align-items: center;

			image {
				width: 72upx;
				height: 36upx;
				margin-right: 10upx;
			}

			.item {
				margin-right: 10upx;
				padding: 0 14upx;
				font-size: 26upx;
				color: #fff;
				border-radius: 6upx;
			}

			.tostore {
				background: linear-gradient(to right, #62BF6F 0%, #65D17F 100%);
			}

			.skill {
				background: linear-gradient(to right, #FF6B38 0%, #FD8C65 100%);
			}

			.group {
				background: linear-gradient(to right, #5386F7 0%, #6AADF8 100%);
			}

			.integral {
				background: linear-gradient(to right, #9e9e9e 0%, #e8e8e8 100%);
			}

			.ordernum {
				font-size: 28upx;
				color: #333333;
			}
		}

		.orderstate {
			color: #FF2842;
			font-size: 28upx;
		}
	}

	.orderinfo {
		width: 100%;
		height: 145upx;
		margin-top: 25upx;
		display: flex;

		&:last-child .orderinfo_l {
			border: none;
		}

		image {
			width: 130upx;
			height: 130upx;
			border-radius: 10upx;
		}

		.orderinfo_l {
			flex: 1;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-bottom: 2upx solid #F9F9F9;
			margin-left: 30upx;

			.orderinfo_info {

				flex: 3;

				.title {
					font-size: 24upx;
					color: #333333;
					line-height: 40upx;
				}

				.standard {
					font-size: 24upx;
					color: #999;
					margin-top: 10upx;
				}
			}
		}

		.orderinfo_r {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;

			.price {
				font-size: 22upx;
				color: #333333;
				text-align: right;

				text {
					font-size: 28upx;
					font-weight: bold;
				}
			}

			.num {
				font-size: 24upx;
				color: #999999;
				text-align: right;
			}
		}
	}

	.paymessage {
		margin-top: 20upx;
		font-size: 24upx;
		color: #999999;
		text-align: right;

		text {
			color: #333333;
			font-size: 28upx;
			font-weight: bold;
		}

		.qian {
			color: #333333;
			font-size: 22upx;
			font-weight: 400;
		}

		.postage {
			margin-left: 6upx;
			color: #999;
			font-size: 24upx;
			font-weight: 400;
		}
	}

	.orderbtn {
		margin-top: 15upx;
		display: flex;
		justify-content: flex-end;
		border-top: 2upx solid #f8f8f8;
		padding-top: 15upx;

		.orderbtn_i {
			width: 160upx;
			height: 50upx;
			text-align: center;
			line-height: 50upx;
			border-radius: 8upx;
			font-size: 24upx;
		}

		.orderbtn_left {
			border: 2upx solid #E1E1E1;
			box-sizing: border-box;
			color: #666666;
			margin-right: 10upx;
		}

		.orderbtn_right {
			background-color: #FF2842;
			color: #FFFFFF;
		}
	}

	.no_order {
		width: 100%;
		text-align: center;
		overflow: hidden;

		image {
			width: 227upx;
			height: 236upx;
			display: block;
			margin: auto;
			margin-top: 200upx;
			margin-bottom: 50upx;
		}

		.no_order_to {
			font-size: 28upx;
			color: #999999;

			text {
				color: #f73e2f;
				text-decoration: underline;
			}
		}
	}
</style>
<style>
	page {
		overflow: hidden;
		background-color: #F9F9F9;
		min-height: 100%;
	}
</style>